<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <script th:src="@{/bootstrap/js/jquery-1.11.2.min.js}"></script>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">

    <script th:src="@{/bootstrap/js/bootstrap.js}"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>


    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>
<body>

<div th:replace="~{components/com::topbar}"></div>
<div th:replace="~{components/side-menu::size-menu-bar}"></div>


<div class="container-fluid">

    <!--    轮播图-->
    <div id="carouselExampleCaptions" class="carousel slide mb-3" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img th:src="@{/images/banner1.jpg}" class="d-block w-100" alt="banner">
                <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Some representative placeholder content for the first slide.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img th:src="@{/images/banner2.jpg}" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Second slide label</h5>
                    <p>Some representative placeholder content for the second slide.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img th:src="@{/images/banner3.jpg}" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Third slide label</h5>
                    <p>Some representative placeholder content for the third slide.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img th:src="@{/images/banner4.jpg}" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Third slide label</h5>
                    <p>Some representative placeholder content for the third slide.</p>
                </div>
            </div>
        </div>
        <button  class="carousel-control-prev carousel-figure-left carousel-figure-btn" type="button" data-target="#carouselExampleCaptions"  data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next carousel-figure-right carousel-figure-btn" type="button" data-target="#carouselExampleCaptions"  data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </button>
    </div>


    <div class="row">
        <div class="input-group col-3 column">
            <input type="text" class="form-control input-small" name="title" th:value="${title}"  id="title" placeholder="请输入要搜索的新闻标题" autocomplete="off">
            <span class="input-group-addon btn btn-primary" id="titleBtn" style="background-color:#007bff; border: none">搜索</span>
        </div>

    </div>

    <br />
    <br />
    <div class="jumbotron" th:each="item:${lists}">

        <div class="d-flex w-100 justify-content-between">
            <h1 class="display-4 mb-1" th:text="${item.getTitle()}"></h1>
            <small th:text="${#temporals.format(item.getAddTime(), 'yyyy-MM-dd HH:mm:ss')}"></small>
        </div>
        <div class="lead overflow-hidden" style="max-height: 50px;" th:utext="${item.getContent()}"></div>
        <hr class="my-4">
        <a class="btn btn-primary btn-lg" style="background-color: #e74c3c; border-color: #e74c3c;" th:href="'/news' + @{/detail} + '?id=' + ${item.getId()}" role="button">more</a>
    </div>
    <!--    </div>-->

</div>
</body>
<script>
    $('#titleBtn').click(function () {
        const title = $("#title").val();
        console.log(title)
        if(title !== ''){
            window.location.href = "/index?title="+title;
        }else{
            window.location.href = "/index";
        }
    });

</script>
</html>